<!-- 确认订单 -->
<template>
    <div class='navTop confirm'>
          <van-nav-bar title="确认订单" left-arrow fixed class="loginNav" @click-left="onClickLeft"/>

          <div class="address" @tap='address'>
            <span>收货人：陈小三  186****1643</span>
            <p>广东省深圳市罗湖区长岭村12栋305</p>
            <van-icon name="arrow"/>
          </div>

          <div class="configure">
              <view>
                  <img :src="info[0].content" alt="">
                  <h2>德国厨房党赞誉有加省力清洁不脏手</h2>
                  <p>规格：100ml</p>
                  <span>积分 <em>1000</em></span>
              </view>
              <view>
                  <h2>购买数量</h2>
                  <uni-number-box class="number" :min="0" :max="9" @change="numberChange"></uni-number-box>
              </view>
              <view>
                  <h2>快递费</h2>
                  <span>包邮</span>
              </view>
              <view>
                  <h2>买家留言</h2>
                  <input type="text" maxlength="85" placeholder="选填：给商家留言（85字以内）">
              </view>
          </div>

          <div class="subtotal">
            <h2>共1件商品</h2>
            <span>小计：<em>1000.00</em></span>
          </div>

          <div class="total">
            <div>合计：<em><i>积分</i>10000</em></div>
            <div @tap="payment">提交订单</div>
          </div>
    </div>
</template>

<script>
import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
export default {
  components: {uniNumberBox},
  data() {
    return {};
  },
  mounted() {},
  methods: {
    onClickLeft() {
      uni.navigateBack();
    },
    numberChange(e){
        console.log(e)
    },
    payment(){
      uni.navigateTo({
          url: 'payment'
      });
    },
    address(){
      uni.navigateTo({
          url: '../address/list'
      });
    }
  },
}
</script>
<style lang='less' scoped>
.confirm{
  background: #f5f5f5;
  min-height: 100vh;
}

.address{
  width: 100%;
  padding: 20upx 25upx;
  line-height: 30upx;
  color: #000;
  display: inline-block;
  position: relative;
  background: #fff;
  margin-top: 20upx;
  span{
    font-size: 30upx;
  }
  p{
    font-size: 24upx;
  }
  van-icon{
    position:absolute;
    right: 25upx;
    top: 50%;
    transform: translate(0,-50%);
    font-size: 26upx;
    color: #C5C5C5
  }
}



.configure{
    padding: 25upx;
    padding-bottom: 0;
    background: #ffffff;
    margin-top: 20upx;
    >view{
        border-bottom: 1upx solid #ACACAC;
        width: 100%;
        display: inline-block;
        h2{
            color: #424242;
            font-size: 26upx;
            font-weight: normal;
            line-height: 75upx;
            padding: 0;
        }
    }
    >view:nth-child(1){
        padding-bottom: 25upx;
        img{
            float: left;
            width: 120upx;
            height: 120upx;
            margin-right: 25upx;
        }
        span{
            margin-top: 30upx;
            color: #FF242E;
            font-size: 26upx;
            display: inline-block;
            em{
                font-style: normal;
                font-size: 36upx;
                margin-left: 8upx;
                display: inline-block;
                padding: 0;
            }
        }
        p{
            color: #ACACAC;
            font-size: 22upx;
        }
    }
    >view:nth-child(2){
        h2{float: left;}
        .number{float: right; margin-top: 10upx;}
    }
    >view:nth-child(3){
        h2{float: left;}
        span{float: right;line-height: 75upx;}
    }

    >view:nth-child(4){
      padding-bottom: 0;
      border: none;
        h2{float: left;width: 140upx;}
       input{
         margin-top: 10upx;
         width:500upx;
         font-size: 26upx;
       }
    }
}

.subtotal{
  margin-top: 25upx;
  background: #fff;
  width: 100%;
  height: 75upx;
  line-height: 75upx;
  padding: 0 25upx;
  h2{
      float: left;
      color: #424242;
      font-size: 26upx;
      font-weight: normal;
      
      padding: 0;
    }
  span{
    float: right;
    color: #424242;
    font-size: 26upx;
    em{
      color: #FF242E;
      font-style: normal;
      display: inline-block
    }
  }
}

.total{
  width: 100%;
  height: 98upx;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  div{height: 98upx;line-height: 98upx;}
  div:nth-child(1){
    background: #fff;
    border-top: 1upx solid #E0E0E0;
    box-sizing: border-box;
    padding-right: 50upx;
    text-align: right;
    color: #000;
    flex: 1;
    em{
      display: inline;
      color: #FF242E;
      i{font-size: 24upx;display: inline;}
    }
  }
  div:nth-child(2){
    background: rgb(255, 225, 66);
    color: #3C1E0D;
    font-size: 32upx;
    width: 236upx;
    text-align: center;
  }
}
</style>